<template>
  <div class="table_box_content">
    <div class="content-box">
      <el-table
        ref="Table"
        class="table-box"
        :data="loginfoWeek"
        border
        height="100%"
        width="100%"
      >
        <el-table-column
          v-for="(table_title,y) in new_table_data"
          prop="date"
          align="center"
          :fixed="y === 0"
          min-width="128px"
          :label="table_title.title"
        >
          <div v-if="table_title.child && table_title.child.length">
            <el-table-column
              v-for="(table_child_title, i) in table_title.child"
              prop="date"
              align="center"
              :label="table_child_title.title"
              :min-width="table_child_title.data_type === 'string'?'128px':'504px'"
              :width="table_child_title.data_type === 'string'?'128px':''"
            >
              <template slot-scope="{row}">
                <span v-if="table_child_title.data_type === 'string' && table_child_title.data_key">{{ row[table_child_title.data_key] }}</span>
                <div v-else>
                  <div class="flex box-text"
                       v-if="table_child_title.data_type === 'plan' && row[table_child_title.data_key].length"
                       v-for="(c_item,c_index) in row[table_child_title.data_key]" :key="c_index">
                    <div class="content-bit">{{ c_index + 1 }}</div>
                    <div class="content-text-1" v-html="c_item.htmlText"></div>
                  </div>
                  <div class="flex box-text"
                       v-if="table_child_title.data_type === 'record' && row[table_child_title.data_key].length">
                    <record-edit :head_type_list="compared_type==='1'? head_type_month :head_type_list"
                                 :text="row[table_child_title.data_key]"
                                 is_table
                                 :diary_type="compared_type==='1'? 'month_compare' : 'week'"
                                 router_type="record"
                                 class="content-text-1"/>
                  </div>
                  <div class="flex box-text" v-if="!row[table_child_title.data_key].length">暂无内容</div>
                </div>
              </template>
            </el-table-column>
          </div>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import RecordEdit from '@/appraise/components/recordEdit'

export default {
  props: {
    compared_list: {
      type: Array,
      default: () => []
    },
    compared_type: {
      type: String,
      default: 2
    },
    router_type: {
      type: String,
      default: 'plan'
    }
  },
  components: {
    RecordEdit
  },
  data() {
    return {
      new_table_data: [],
      loginfoWeek: [],
      head_type_list: [
        {img:'appraiseimportantmatter',text:'重点事项'},
        {img:'appraisediarymatter',text:'日常事项'},
        {img:'appraiseothermatter',text:'其他事项'},
      ],
      head_type_month: [
        {text:'工作纪实'},
        {text:'个人评价'}
      ],
    }
  },
  watch: {
    compared_list(val) {
      this.new_table_data = []
      this.loginfoWeek = []
      val[0].map(res=> {
        this.loginfoWeek.push({
          'name':this.compared_type === '1'?res.deptName:res.userName
        })
      })
      val.map(res=> {
        this.new_table_data.push({
          title: this.compared_type==='0'?res[0].weekNum+'周':res[0].monthCode.substring(4)+'月',
          child: [
            { title: this.compared_type === '0'?'周纪实':'月小结',data_type:'record',data_key: `record_contentList_${this.compared_type==='0'?res[0].weekNum:res[0].monthCode.substring(4)}`},
            { title: this.compared_type === '0'?'周计划':'月计划',data_type:'plan',data_key: `plan_contentList_${this.compared_type==='0'?res[0].weekNum:res[0].monthCode.substring(4)}`}
          ]
        })
        res.map((result,r_index) => {
          this.loginfoWeek[r_index][`plan_contentList_${this.compared_type==='0'?res[0].weekNum:res[0].monthCode.substring(4)}`] = result.planContentList
          this.loginfoWeek[r_index][`record_contentList_${this.compared_type==='0'?res[0].weekNum:res[0].monthCode.substring(4)}`] = result.recordContentList
        })
      })
      this.new_table_data.unshift({
        title: '',
        child: [
          { title: '类别', data_key: 'name',data_type:'string' }
        ]
      })
      this.$nextTick(()=> {
        this.$refs.Table.doLayout()
      })
    }
  },
  mounted() {
    this.compared_list[0].map(res=> {
      this.loginfoWeek.push({
        'name':this.compared_type === 1?res.deptName:res.userName
      })
    })
    this.compared_list.map(res=> {
      this.new_table_data.push({
        title: this.compared_type==='0'?res[0].weekNum+'周':res[0].monthCode.substring(4)+'月',
        child: [
          { title: this.compared_type === '0'?'周纪实':'月小结',data_type:'record',data_key: `record_contentList_${this.compared_type==='0'?res[0].weekNum:res[0].monthCode.substring(4)}`},
          { title: this.compared_type === '0'?'周计划':'月计划',data_type:'plan',data_key: `plan_contentList_${this.compared_type==='0'?res[0].weekNum:res[0].monthCode.substring(4)}`}
        ]
      })
      res.map((result,r_index) => {
        this.loginfoWeek[r_index][`plan_contentList_${this.compared_type==='0'?res[0].weekNum:res[0].monthCode.substring(4)}`] = result.planContentList
        this.loginfoWeek[r_index][`record_contentList_${this.compared_type==='0'?res[0].weekNum:res[0].monthCode.substring(4)}`] = result.recordContentList
      })
    })
    this.new_table_data.unshift({
      title: '',
      child: [
        { title: '类别', data_key: 'name',data_type:'string' }
      ]
    })
    this.$nextTick(()=> {
      this.$refs.Table.doLayout()
    })
  },
  methods: {

  }
}
</script>

<style scoped>
::v-deep .el-table thead.is-group th {
  background-color: #F5F5F5;
}
::v-deep .el-table__fixed {
  height: 100% !important;
}
.box-text {
  padding: 8px;
}
/*table*/
.table_box_content {
  width: 100%;
  height: 100%;
}
.flex {
  display: flex;
}
.content-bit {
  width: 17px;
  height: 17px;
  margin-top: 0.2rem;
  border-radius: 0.1rem;
  background-color: rgba(59, 117, 255, 1);
  color: #FFFFFF;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-text-1 {
  flex: 1 !important;
  margin-left: 7px;
  font-size: 16px;
  text-align: start !important;
  white-space: pre-wrap;
}
.content-box {
  height: 100%;
  border: 1px solid rgba(0,0,0,0.1)
}
.table-box {
  width: 100%;
  height: 100%;
  font-size: 16px;
}
@media (max-width: 1024px) {
  .table-box {
    font-size: 14px;
  }
  .content-bit {
    width: 17px;
    height: 17px;
    margin-top: 0.2rem;
    border-radius: 0.1rem;
    background-color: rgba(59, 117, 255, 1);
    color: #FFFFFF;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .content-text-1 {
    flex: 1 !important;
    margin-left: 7px;
    font-size: 14px;
    text-align: start !important;
    white-space: pre-wrap;
  }
}
</style>
